<template>
  <div>
    <div>
      <div class="licc-pages-hot-goods-top">
        <el-row>
          <el-col :span="6">
            <el-checkbox-group
              v-model="checkList"
              :min="1">
              <el-checkbox label="热销商品列表" @change="checkAllListChage"></el-checkbox>
              <el-checkbox label="热销推荐列表" @change="checkNewListChage"></el-checkbox>
            </el-checkbox-group>
          </el-col>
        </el-row>
      </div>
      <div class="licc-pages-new-goods-table">
        <el-table
          stripe
          border
          :data="goods"
          :default-sort = "{prop: 'createDate', order: 'descending'}">
          <!--:data="goods.slice((currentPage-1)*pagesize,currentPage*pagesize)"-->
          <el-table-column prop="goodsSn" label="商品货号" sortable></el-table-column>
          <el-table-column prop="goodsName" label="商品名称"></el-table-column>
          <el-table-column prop="shopPrice" label="销售价"></el-table-column>
          <el-table-column prop="goodsNumber" label="库存" ></el-table-column>
          <el-table-column prop="createDate" label="添加时间" sortable></el-table-column>
          <el-table-column prop="hotSalesVolume" label="最近销量" >
            <template slot-scope="scope">
              <strong style="color: #F56C6C; font-size: 16px">x {{scope.row.hotSalesVolume}}</strong>
            </template>
          </el-table-column>
          <el-table-column prop="goodsUnit" label="单位"></el-table-column>
          <el-table-column prop="costPrice" label="成本价"></el-table-column>
          <el-table-column prop="goodsWeight" label="重量（kg）"></el-table-column>
          <el-table-column prop="goodsBrief" label="简短描述"></el-table-column>
          <el-table-column prop="hot" label="热销推荐">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.hot"
                @change="hotGoodsSwitchChange(scope.row)"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column fixed="right" width="100" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="handleEdit(scope.$index, scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 35, 50]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="goodsTotal">
        </el-pagination>
      </div>
    </div>
    <div>
      <el-dialog
        title="商品详情"
        :visible.sync="dialogGoodsInfoVisible"
        width="70%" style="text-align: left">
        <span>
          <goods-info v-if="dialogGoodsInfoVisible" :message="goodsInfoCheck"></goods-info>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogGoodsInfoVisible = false">返 回</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>

  import pagesApi from '@/api/backstage/pages'
  import GoodsInfo from '../components/goodsInfo'
  export default {
    name: 'Goods_listInfo',
    components: {
      GoodsInfo
    },
    data() {
      return {
        checkList:['热销商品列表'],
        /** 商品列表 **/
        goods:[],
        /** 查询状态 **/
        params: {},
        currentPage: 1,
        pagesize:20,
        goodsTotal:0,
        /** 订单详情显示 **/
        dialogGoodsInfoVisible: false,
        goodsInfoCheck:{},
      }
    },
    created() {
      this.initData()
    },
    methods:{
      initData(){
        this.goods = [];
        this.goodsTotal = 0;
        pagesApi.getHotGoodsDataList(this.params, this.currentPage, this.pagesize).then(res => {
          this.goods = res.data.records;
          this.goodsTotal = res.data.total;
        })
      },
      /** 分页---开始 **/
      handleSizeChange(val) {
        this.pagesize = val;
        this.initData();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.initData();
      },
      /** 分页---结束 **/
      checkAllListChage(value){
        if (value == true) {
          this.params = {};
          this.checkList = ['热销商品列表'];
          this.initData();
        }
      },
      checkNewListChage(value){
        if (value == true) {
          this.params = {
            hot:1
          };
          this.checkList = ['热销推荐列表'];
          this.initData();
        }
      },
      /** 新品推荐或取消推荐按钮 **/
      hotGoodsSwitchChange(row){
        let content = (row.hot === 1)?'该操作将会将商品号为“'+row.goodsSn+'”的商品加入热销推荐，是否继续？':'该操作将会将会将商品号为“'+row.goodsSn+'”的商品移除热销推荐，是否继续？';
        this.$confirm(content, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = {
            id:row.id,
            hot:row.hot
          }
          pagesApi.updateGoodsRecommend(params).then(res => {
            this.$notify({title: '成功', message: "商品货号为“"+row.goodsSn+"”的商品"+(row.hot === 1?"加入":"移除")+"新品推荐成功", type: 'success'});
            this.initData();
          }).catch(() => {
            this.$notify.error({title: '失败', message: "商品货号为“"+row.goodsSn+"”的商品"+(row.hot === 1?"加入":"移除")+"新品推荐失败"});
            row.hot = (row.hot === 1)?0:1;
          })
        }).catch(() => {
          /** 取消提交 **/
          row.hot = (row.hot === 1)?0:1;
          this.$notify.info({title: '取消', message: '已取消操作'});
        });
      },
      /** 详情页面 **/
      handleEdit(index,row){
        this.goodsInfoCheck = row;
        this.dialogGoodsInfoVisible = true;
      }
    }
  }
</script>
<style>
  .licc-pages-hot-goods-top{
    width: 100%;
    min-width: 1100px;
  }
</style>
